import Taro, { Component, Config } from '@tarojs/taro'
import {View, Form, Input, Button, Text, Image} from '@tarojs/components'
import {observer, inject} from '@tarojs/mobx'
import { IStoreProps } from '../../store/Stores'

import './login.less'
import {getRuntime, isPhone} from "../../utils/common";
import eye_on from "../../assets/img/icon_01_on.png";
import eye from "../../assets/img/icon_01.png";
import check from "../../assets/img/icon_64.png";
import check_on from "../../assets/img/icon_64_on.png";

@inject("stores")
@observer
class RegisterStepOne extends Component<IStoreProps> {
  constructor(props){
    super(props)
  }

  state = {
    phoneNumber: '',
    smsCode: '',
    currentEye: false,
    currentCenterEye: false,
    eyeImg: eye,
    eyeCenterImg: eye,
    password: null,
    passwordCenter: null,
    passwordType: 'password',
    passwordCenterType: 'password',
    invitationCode: 4,
    focus:'phoneNumber', // 判断鼠标聚焦的input框
    isComplete: true, // 是否可以点击下一步
    getCodeText: '获取验证码',
    btnCodeStatus: false,

    isAgree: false, // 是否勾选服务协议
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '新用户注册'})
    let invitationCode = this.$router.params.invitationCode
    if(invitationCode) { this.setState({ invitationCode }) }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getCode() {
    let { phoneNumber,btnCodeStatus } = this.state
    if(typeof btnCodeStatus === 'number') return
    if(!phoneNumber){getRuntime().showToast('请填写手机号~'); return false}
    if(!isPhone){getRuntime().showToast('请填写11位手机号码~'); return false}

    this.countDown()

    let { userStore } =  this.props.stores
    userStore.getSmsCode({
      form: {
        phoneNumber: phoneNumber
      },callback: () => {
        getRuntime().showToast('验证码发送成功, 请注意查收~')
      }
    })
  }

  // 验证码倒计时
  countDown() {
    let getCodeText = 60
    let timer = setInterval(() => {
      getCodeText--
      if(getCodeText===0){
        clearInterval(timer)
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false,
        })
      }else {
        this.setState({
          getCodeText: getCodeText+'s',
          btnCodeStatus: true,
        })
      }
    },1000)
  }

  // input聚焦
  inputFocus (type: string = 'phoneNumber') {
    this.setState({
      focus: type
    })
  }

  inputChange (type: string,e) {
    let value = e.target.value
    if(type === 'invitationCode') {
      // 去掉占位符0
      let ind = 0
      for (let i in value){
        if(value.charAt(i) > 0){
          ind = i; break;
        }
      }
      value = value.substr(ind)
    }
    this.setState({
      [type]: value
    }, () => {
      let { phoneNumber,smsCode,password,passwordCenter} = this.state
      if(phoneNumber && smsCode && password && passwordCenter){
        this.setState({
          isComplete: false
        })
      }else {
        this.setState({
          isComplete: true
        })
      }
    })
  }

  toggleEye () {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let  eyeImg = this.state.currentEye ? eye_on : eye
      let  passwordType = this.state.currentEye ? 'text' : 'password'
      this.setState({
        eyeImg,
        passwordType
      })
    })
  }

  toggleCenterEye () {
    this.setState({
      currentCenterEye: !this.state.currentCenterEye
    }, () => {
      let  eyeCenterImg = this.state.currentCenterEye ? eye_on : eye
      let  passwordCenterType = this.state.currentCenterEye ? 'text' : 'password'
      this.setState({
        eyeCenterImg,
        passwordCenterType
      })
    })
  }

  setAgree() {
    this.setState({ isAgree: !this.state.isAgree })
  }

  formSubmit () {
    let { phoneNumber,smsCode,password,passwordCenter,invitationCode,isAgree} = this.state
    if(!phoneNumber){getRuntime().showToast('请填写手机号~'); return false}
    if(!smsCode){getRuntime().showToast('请填写验证码~'); return false}
    if(!password){getRuntime().showToast('请填写密码~'); return false}
    if(password!==passwordCenter ){getRuntime().showToast('两次输入密码不一致~'); return false}
    if(!isAgree) { getRuntime().showToast('请阅读并勾选用户注册服务协议~'); return false }
    const {stores: { userStore }} = this.props;
    userStore.registerStepOneF({
      form: {
        sourceUserId: invitationCode,
        phoneNumber,
        password,
        smsCode,
      },
      callback: () => {
        // 缓存invitationCode
        getRuntime().setStorage('fatherUserId', invitationCode)
        getRuntime().showToast('恭喜您注册成功,请前往登录~')
        setTimeout(() => {
          getRuntime().navigateTo('/pages/login/login?fatherUserId='+invitationCode)
        },2000)
      }
    })
  }

  render () {
    let { focus, isComplete,getCodeText,btnCodeStatus,passwordType,passwordCenterType,eyeImg,eyeCenterImg,invitationCode,isAgree } = this.state

    return (
      <View className='login-wrap'>
       <View>
         <Text className={'title'}>欢迎您注册建务通</Text>
           <View className={focus === 'phoneNumber' ? 'input-group input-group-on' : 'input-group'}>
             <Text className='input-title'>手机号</Text>
             <Input className='input' type='number' name='phoneNumber' placeholderClass='placeholder-class' placeholder='请输入11位手机号' maxLenght='11'
                    onFocus={this.inputFocus.bind(this, 'phoneNumber')}
                    onChange={this.inputChange.bind(this,'phoneNumber')}
             />
           </View>
           <View className={focus === 'smsCode' ? 'input-group input-group-on' : 'input-group'}>
             <Text className='input-title'>验证码</Text>
             <Input className='input' type='text'  name='smsCode' placeholderClass='placeholder-class' placeholder='请输入验证码'
                    onFocus={this.inputFocus.bind(this, 'smsCode')}
                    onChange={this.inputChange.bind(this,'smsCode')}

             />
             <Button className='get-code' onClick={this.getCode.bind(this)} type={"default"} disabled={btnCodeStatus}>{getCodeText}</Button>
           </View>

           <View className={focus === 'password' ? 'input-group input-group-on' : 'input-group'}>
             <Text className='input-title'>密码</Text>
             <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordType}
                    name='password'
                    onFocus={this.inputFocus.bind(this, 'password')}
                    onChange={this.inputChange.bind(this,'password')}
             />
             <Image className='eye' src={eyeImg} onClick={this.toggleEye.bind(this)} />
           </View>
           <View className={focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group'}>
             <Text className='input-title'>确认密码</Text>
             <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordCenterType}
                    name='password'
                    onFocus={this.inputFocus.bind(this, 'passwordCenter')}
                    onChange={this.inputChange.bind(this,'passwordCenter')}
             />
             <Image className='eye' src={eyeCenterImg} onClick={this.toggleCenterEye.bind(this)} />
           </View>
           <View className={focus === 'invitationCode' ? 'input-group input-group-on' : 'input-group'} style={{display: 'none'}}>
             <Text className='input-title'>邀请码</Text>
             <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入邀请码(选填)' type='text'
                    value={invitationCode}
                    name='invitationCode'
                    disabled={true}
                    onFocus={this.inputFocus.bind(this, 'invitationCode')}
                    onChange={this.inputChange.bind(this,'invitationCode')}
             />
           </View>
           <Button className={isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on'} type='primary' disabled={isComplete} onClick={this.formSubmit.bind(this)}>立即注册</Button>
       </View>

        <View className='protocol'>
          {
            !isAgree && <Image className='icon-check' src={check} onClick={this.setAgree.bind(this)} />
          }
          {
            isAgree && <Image className='icon-check' src={check_on} onClick={this.setAgree.bind(this)} />
          }
          <View className='protocol-text' onClick={this.handelRouter.bind(this,'/pages/other/regist_agreement')}>《建务通服务协议》</View>
          <View className='split'>|</View>
          <View className='protocol-text' onClick={this.handelRouter.bind(this,'/pages/login/login')}> 前往登录</View>
        </View>
      </View>
    )
  }
}

export default RegisterStepOne
